<div id="app" v-cloak>
    <div class="flex-column flex-content-center">
        <div class="padding20">
            <el-scrollbar height="83vh" width="100%">
                <el-form :model="form" ref="form" :rules="rules" label-width="auto" style="width: 700px;margin-top: 20px">
                    <el-form-item label="分组名称" prop="title">
                        <el-input v-model="form.name" placeholder="请填写分组名称" style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="权限" prop="title">
                        <el-tree-select
                                v-model="form.rules"
                                placeholder="选择权限"
                                :data="allRules"
                                multiple
                                :render-after-expand="false"
                                show-checkbox
                                style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item label="上级角色" prop="pid">

                        <el-cascader placeholder="选择上级角色" v-model="form.pid" :options="pidList" :show-all-levels="false" :props="{
  checkStrictly: true
}" clearable style="width: 240px"/>
                    </el-form-item>
                    <el-form-item label="状态" >
                        <el-radio-group v-model="form.status">
                            <el-radio :value="1">正常</el-radio>
                            <el-radio :value="0">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </div>
        <div class="flex-row top10 flex-content-end">
            <div style="width: 95%">
                <el-button type="primary" @click="onSubmit" color="#626aef">保存</el-button>
                <el-button  @click="handleCancel">取消</el-button>
            </div>
        </div>
    </div>
</div>
